<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听数据变化</title>
</head>
<body>
<div id="wrap">
    {{a}}<br>
    {{b}}<br>
    {{json|json}}
</div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">

//    window.onload = function () {
//        var vm = new Vue({
//            el: '#wrap',
//            data: {
//                a: 1,
//                b: 2,
//            }
//        });
////        使用vm.$watch监听数据,vm.$watch('监听data中的元素名',回调函数)
//        vm.$watch('a', function () {
//            alert('a放生了变化')
//        })
//        document.onclick=function () {
//            vm.a=100;
//        }
//    }

//深度监听

    window.onload = function () {
        var vm = new Vue({
            el: '#wrap',
            data: {
                json: {name:'blue',age:'23'},
                b: 2,
            }
        });
        // 使用vm.$watch深度监听数据,vm.$watch('监听data中的元素名',回调函数,{deep:true})
        vm.$watch('json', function () {
            alert('json放生了变化')
        },{deep:true})
        document.onclick=function () {
            vm.json.name='red';
        }
    }
</script>